<template>
  <view>
    <view
      v-if="InfouSerLevel === '5' || InfouSerLevel === '6'"
      class="qx-style"
    >
      暂无权限
    </view>
    <view class="cont" v-else>
      <u-navbar
        :placeholder="true"
        :safeAreaInsetTop="true"
        bgColor="#FFF"
        titleStyle="color:#000"
      >
        <view class="u-nav-slot" slot="center">
          <view class="config_bar" @click="goBackOrder" v-if="!isGoDetail">
            <uni-icons type="back" size="30"></uni-icons>
          </view>
          <view
            class="config_bar"
            v-if="isGoConfig || isGoDetail"
            @click="goBack"
          >
            <view v-if="!isGoDetail">
              <uni-icons type="back" size="30"></uni-icons>
            </view>
            <view v-else> 返回 </view>
          </view>
          {{ isGoDetail ? "班结记录详情" : showTab ? "班结记录" : "班结" }}
        </view>
      </u-navbar>
      <view v-if="!isGoConfig && !isGoDetail">
        <!-- <view class="cont_wraper"></view> -->
        <!-- <view class="conclu_tab_wraper">
          <view  v-if="!showTab" class="conclu_tab a" @click="handleStation" :class="[tabId === 0 ? 'active' : '']" >油站班结</view>
          <view v-else class="conclu_tab b" @click="handleRecord" :class="[tabId === 1 ? 'active' : '']" >班结记录</view>
        </view> -->
        <view class="conclu_tab_main">
          <!-- 油站班结 -->
          <scroll-view
            style="height: 90vh; position: fixed"
            :refresher-enabled="refresherEnabled"
            scroll-y
            @refresherrefresh="refresherrefresh"
            :refresher-triggered="refresherTriggered"
            v-if="tabId === 0"
            :onPageScroll="onPageScroll"
          >
            <view class="tab_main_station">
              <view class="station_select" v-if="!staff">
                <uni-data-select
                  v-model="selectValue"
                  :localdata="range"
                  @change="handleChangeSlect"
                  placeholder="请选择要班结的油站"
                />
              </view>
              <!-- <uni-load-more v-if="loadingStation" status="loading" /> -->

              <view
                v-if="selectValue"
                style="
                  display: flex;
                  align-items: center;
                  width: 100%;
                  margin-bottom: 30rpx;
                "
              >
                <view style="width: 72%; font-size: 26rpx">
                  <view>班结开始时间：{{ startTime }}</view>
                  <view>班结结束时间：{{ createEndTime }}</view>
                </view>
                <button
                  style="
                    width: 35%;
                    background-color: #fff6e6;
                    padding: 0px;
                    margin: 0px;
                    border: 1rpx solid #fc6703;
                    height: 65rpx;
                    line-height: 65rpx;
                  "
                  size="mini"
                  @click="buttonTime"
                >
                  <view
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: space-evenly;
                    "
                  >
                    <uni-icons
                      type="loop"
                      size="15"
                      color="#fc6703"
                    ></uni-icons>
                    <view style="font-size: 24rpx; color: #fc6703"
                      >更新班结结束时间</view
                    >
                  </view>
                </button>
              </view>

              <view class="title_record_a" v-if="selectValue">
                <view class="title_record_b">
                  <view class="order_nav">
                    <view class="name">应收金额(元)</view>
                    <view class="val"
                      ><text class="text">￥</text
                      >{{ stationInfo.receivableAmt || 0 }}
                    </view>
                  </view>
                  <view class="order_nav center">
                    <view class="name">优惠总金额金额(元)</view>
                    <view class="val"
                      ><text class="text">￥</text
                      >{{ stationInfo.totalDiscountAmt || 0 }}
                    </view>
                  </view>
                  <view class="order_nav">
                    <view class="name">实收金额(元)</view>
                    <view class="val"
                      ><text class="text">￥</text
                      >{{ stationInfo.amt || 0 }}</view
                    >
                  </view>
                </view>
                <view class="title_record_b title_record_b1">
                  <view class="order_nav">
                    <view class="name">交易笔数(笔)</view>
                    <view class="val">{{ stationInfo.orderCount || 0 }}</view>
                  </view>
                  <view class="title_line"></view>
                  <view class="order_nav">
                    <view class="name">到账总金额(元)</view>
                    <view class="val"
                      ><text class="text">￥</text
                      >{{ stationInfo.totalWithdrawalAmount || 0 }}</view
                    >
                  </view>
                </view>
              </view>

              <view class="station_all_wraper" v-if="selectValue">
                <view class="station_all_title">
                  <view class="val">汇总明细</view>
                </view>
                <view class="station_all_line"></view>
                <view class="station_all_container">
                  <view class="name">消费合计应收</view>
                  <view class="val"
                    >{{ stationInfo.receivableAmt || 0 }}(元)
                  </view>
                </view>
                <view class="station_all_container">
                  <view class="name">消费合计实收</view>
                  <view class="val">{{ stationInfo.amt || 0 }}(元)</view>
                </view>
                <view class="station_all_container">
                  <view class="name">优惠劵合计金额</view>
                  <view class="val"
                    >{{ stationInfo.discountCouponAmt || 0 }}(元)</view
                  >
                </view>
                <view class="station_all_container">
                  <view class="name">优惠劵核销金额</view>
                  <view class="val"
                    >{{ stationInfo.killCouponAmt || 0 }}(元)</view
                  >
                </view>
                <view class="station_all_container">
                  <view class="name">立减合计金额</view>
                  <view class="val"
                    >{{ stationInfo.discountAmt || 0 }}(元)</view
                  >
                </view>
                <view class="station_all_container">
                  <view class="name">退款合计金额</view>
                  <view class="val">{{ stationInfo.refundAmt || 0 }}(元)</view>
                </view>
                <view class="station_all_container">
                  <view class="name">充值实收合计金额</view>
                  <view class="val"
                    >{{ stationInfo.actualRechargeReceivedAmt || 0 }}(元)</view
                  >
                </view>
                <view class="station_all_container">
                  <view class="name">笔数</view>
                  <view class="val">{{ stationInfo.orderCount || 0 }}(笔)</view>
                </view>
                <view
                  class="station_all_container"
                  v-for="item in stationList"
                  :key="item.oilId"
                  v-if="item.oilName"
                >
                  <view class="name">{{
                    item.oilName + "/" + item.oilPrice
                  }}</view>
                  <view class="val">{{ item.orderLiters || 0 }}(L/kg)</view>
                </view>
                <view class="station_all_container_text">
                  <view class="name">备注</view>
                  <textarea v-model="textNotes" />
                </view>
              </view>
              <!-- <view v-if="selectValue && !loadingStation" class="none_record">没有数据</view> -->
              <button
                v-if="selectValue"
                @click="configSubmit"
                style="margin-bottom: 100rpx"
                :disabled="disabled"
                :class="{ disabled }"
              >
                确认班结
              </button>
            </view>
          </scroll-view>

          <!-- 班结记录 -->
          <view class="tab_main_record" v-if="tabId === 1">
            <view
              v-if="!loadingStation && !loadingStation"
              class="main_record_wraper"
            >
              <view class="record_station" v-if="!staff">
                <uni-data-select
                  v-model="recordValue"
                  :localdata="range"
                  placeholder="请选择要班结的油站"
                />
              </view>
              <view class="record_station">
                <uni-datetime-picker
                  v-model="recordSingle"
                  type="datetimerange"
                />
              </view>
              <button @click="searchRecord">班结油站查询</button>
              <!-- <button @click="searchRecord" :class="[(recordSingle && recordValue) ? '' : 'disabled']">班结油站查询</button> -->
            </view>
            <view
              class="search_record_wraper"
              v-if="!loadingStation && !!recordList.length"
            >
              <!-- <view v-if="!!recordList.length" class="title_record">
                            收入合计：{{allAmt}}元
                        </view> -->
              <view
                v-if="!recordList.length && !loadingStation && isShowNone"
                class="none_record"
                >没有数据
              </view>
              <view
                class="record_list"
                v-for="item in recordList"
                @click="goDetailPage(item.classNo)"
                :key="item.classNo"
              >
                <uni-icons
                  type="forward"
                  class="record_icon"
                  size="18"
                  color="#999"
                ></uni-icons>
                <view class="val_amt"
                  >{{ item.amt > 0 ? "+" + item.amt : item.amt || 0 }}元</view
                >
                <view class="record_card">
                  班结时间：{{
                    `${item.classStartTime ? item.classStartTime : "-"} - ${
                      item.classEndTime
                    }`
                  }}
                </view>
                <view class="record_card">班次：{{ item.classNo }}</view>
                <view class="record_cont">
                  <view class="name">油站名：{{ item.stationName }}</view>
                  <!-- <view class="val" @click.stop="() => xiaopiao(item)">补打小票</view> -->
                </view>
                <view class="record_card">班结人：{{ item.createName }}</view>
              </view>
            </view>
            <uni-load-more v-if="loadingStation" status="loading" />
          </view>
        </view>
      </view>
      <view v-else-if="tabId === 0" class="config_wraper">
        <uni-icons type="checkbox-filled" size="80" color="#3d8de2"></uni-icons>
        <view class="config_action">操作成功</view>
        <!-- <view class="config_container">
                <view>内容详情，根据实际文案安排</view>
                <view>如果换行不超过两行</view>
            </view> -->
      </view>
      <!-- 查看详情 -->
      <view v-else-if="tabId === 1" class="record_detail_container">
        <view class="card">
          <view class="name">油站名：</view>
          <view class="val">{{
            detaiInfo.querySummaryByClassNo[0].stationName
          }}</view>
        </view>
        <view class="card">
          <view class="name">班次：</view>
          <view class="val">{{
            detaiInfo.querySummaryByClassNo[0].classNo
          }}</view>
        </view>
        <view class="card">
          <view class="name">开始时间：</view>
          <view class="val">{{
            detaiInfo.querySummaryByClassNo[0].classStartTime
          }}</view>
        </view>
        <view class="card">
          <view class="name">结束时间：</view>
          <view class="val">{{
            detaiInfo.querySummaryByClassNo[0].classEndTime
          }}</view>
        </view>
        <view class="card">
          <view class="name">班结人：</view>
          <view class="val">{{
            detaiInfo.querySummaryByClassNo[0].createName
          }}</view>
        </view>
        <view class="card">
          <view class="name">消费合计应收：</view>
          <view class="val"
            >{{
              detaiInfo.querySummaryByClassNo[0].receivableAmt || 0
            }}(元)</view
          >
        </view>
        <view class="card">
          <view class="name">消费合计实收：</view>
          <view class="val"
            >{{ detaiInfo.querySummaryByClassNo[0].amt || 0 }}(元)</view
          >
        </view>
        <view class="card">
          <view class="name">优惠券合计金额：</view>
          <view class="val"
            >{{
              detaiInfo.querySummaryByClassNo[0].discountCouponAmt || 0
            }}(元)</view
          >
        </view>
        <view class="card">
          <view class="name">优惠券核销金额：</view>
          <view class="val"
            >{{
              detaiInfo.querySummaryByClassNo[0].killCouponAmt || 0
            }}(元)</view
          >
        </view>
        <view class="card">
          <view class="name">立减合计金额：</view>
          <view class="val"
            >{{ detaiInfo.querySummaryByClassNo[0].discountAmt || 0 }}(元)</view
          >
        </view>
        <view class="card">
          <view class="name">客户退款合计金额：</view>
          <view class="val"
            >{{ detaiInfo.querySummaryByClassNo[0].refundAmt || 0 }}(元)</view
          >
        </view>
        <view class="card">
          <view class="name">充值实收合计金额：</view>
          <view class="val"
            >{{
              detaiInfo.querySummaryByClassNo[0].actualRechargeReceivedAmt || 0
            }}(元)</view
          >
        </view>
        <view class="card">
          <view class="name">笔数：</view>
          <view class="val">{{
            detaiInfo.querySummaryByClassNo[0].orderCount || 0
          }}</view>
        </view>
        <view class="card">
          <view class="name">备注：</view>
          <view class="val">{{
            detaiInfo.querySummaryByClassNo[0].note || ""
          }}</view>
        </view>
        <view v-if="detaiInfo.queryGroupByOil[0]" class="line_last"></view>
        <view
          class="card_list"
          v-for="(item, index) in detaiInfo.queryGroupByOil"
          :key="item.id"
        >
          <view class="card">
            <view class="name">油品名称：</view>
            <view class="val">{{ item.oil_name }}</view>
          </view>
          <view class="card">
            <view class="name">油价-单价：</view>
            <view class="val">{{ item.oil_price || 0 }}(元)</view>
          </view>
          <view class="card">
            <view class="name">数量：</view>
            <view class="val">{{ item.order_liters || 0 }}(L/kg)</view>
          </view>
          <view class="card">
            <view class="name">应收金额：</view>
            <view class="val">{{ item.receivable_amt || 0 }}(元)</view>
          </view>
          <view class="card">
            <view class="name">实收金额：</view>
            <view class="val">{{ item.amt || 0 }}(元)</view>
          </view>
          <view class="card">
            <view class="name">优惠劵优惠：</view>
            <view class="val">{{ item.discount_coupon_amt || 0 }}(元)</view>
          </view>
          <view
            class="card"
            :class="[detaiInfo.queryGroupByOil[index + 1] ? 'line' : '']"
          >
            <view class="name">优惠：</view>
            <view class="val">{{ item.discount_amt || 0 }}(元)</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { getUserInfo } from "@/util/info.js";
import {
  getStationList,
  stationInitiateClassSe,
  getRecordDetail,
  getRecordList,
  configCreateClassSe,
  exportClassSe,
  getStationListNew,
  employeePermission,changeTimeClass,
} from "@/common/yftx-api.js";
import { Debounce } from "@/util/throttle.js";
export default {
  data() {
    return {
      disabled: false, //是否禁用班结按钮
      staff: false,
      userInfo: {},
      // 开启下拉刷新
      refresherEnabled: false,
      // 下拉刷新
      refresherTriggered: false,
      // 油站班结开始时间
      startTime: "",
      // 油站班结结束时间
      createEndTime: "",

      InfouSerLevel: "",
      tabId: 0,
      selectValue: "",
      range: [],
      loadingStation: false,
      isShowNone: false,
      stationId: "",
      stationList: [],
      stationInfo: {},
      textNotes: "",
      cardSum: {},
      detaiInfo: {},
      recordList: [],
      isGoConfig: false,
      isGoDetail: false,
      recordSingle: [],
      recordValue: "",
      createEndTime: "",
      showTab: false,
    };
  },
  async onShow() {
    await this.getStaff();
    await this.getUserInfouSerLevel();
    this.getData();
  },
  onLoad(options) {
    // 获取 URL 中的参数
    const val = options.param;
    if (val) {
      this.tabId = 1;
      this.showTab = true;
    }
  },
  computed: {
    allAmt() {
      let val = 0;
      console.log("this.recordList", this.recordList);
      this.recordList.map((item) => {
        val += item.amt;
      });
      return val;
    },
  },
  // watch: {
  // 	selectValue() {
  //         this.handleChangeSlect();
  // 	}
  // },
  methods: {
    // 判断是否是员工权限
    async getStaff() {
      const res = await employeePermission();
      this.staff = res.data.staff;
    },
    // 滚动
    onPageScroll(e) {
      if (e.scrollTop == 0 || !e.scrollTop) {
        if (this.selectValue) {
          this.refresherEnabled = true;
        }
      } else {
        this.refresherEnabled = false;
      }
    },

    // 下拉刷新被触发了
    refresherrefresh() {
      this.refresherTriggered = true;
      if (this.selectValue) {
        this.handleChangeSlect();
      }
      setTimeout(() => {
        this.refresherTriggered = false;
      }, 500);
    },

    // 点击了更新班结结束时间
    buttonTime() {
      this.handleChangeSlect();
    },

    // async getData() {
    //   const aaa = await getStationList();
    //   getStationList().then((res) => {
    //     if (res && res.code === 200) {
    //       const range = res.rows.map((item) => {
    //         return {
    //           value: item.stationId,
    //           text: item.stationName,
    //         };
    //       });
    //       this.range = range;
    //       console.log("range", range);
    //       // this.selectValue = range[0].value;
    //     }
    //   });
    // },

    // 返回
    goBackOrder() {
      uni.switchTab({
        url: "/pages/index/my",
      });
    },

    async getData() {
      const userInfo = await getUserInfo("userInfo");
      const { enterpriseId } = JSON.parse(userInfo);
      let params = { enterpriseId };
      if (this.InfouSerLevel === "2" || this.InfouSerLevel === "3") {
        // 油站和员工账号，不用传status
        params = { enterpriseId };
      } else {
        params.status = 1;
      }
      getStationListNew(params).then(async (res) => {
        if (res && res.length) {
          const range = res.map((item) => {
            return {
              value: item.stationId,
              text: item.stationName,
            };
          });
          this.range = range;
          if(this.InfouSerLevel == 2 && !this.staff) {
            await this.changeTime()
          }else {
            this.dataTiam();
          }
           if (range.length === 1) {
            this.recordValue = range[0].value;
            this.selectValue = range[0].value;
            this.searchRecord(); // 获取班结记录
            this.handleChangeSlect(range[0].value);
          }
        }
      });
    },
    async changeTime() {
      let params = {
        stationId: this.userInfo.stationId,
        userId: this.userInfo.userId
      }
      const res = await changeTimeClass(params)
      this.recordSingle = [res.data.startTime,res.data.endTime]
      console.log(this.recordSingle, 'this.recordSingle');
    },
    add(m) {
      return m < 10 ? "0" + m : m;
    },

    // 时间
    dataTiam() {
      let dateTime = [];
      const today = new Date();

      const yesterdays = new Date(
        today.setTime(today.getTime() - 6 * 24 * 60 * 60 * 1000)
      );
      const ys = yesterdays.getFullYear();
      const ms = yesterdays.getMonth() + 1;
      const ds = yesterdays.getDate();
      const s = ys + "-" + this.add(ms) + "-" + this.add(ds) + " " + "00:00:00"; //开始

      const yesterday = new Date(
        today.setTime(today.getTime() + 6 * 24 * 60 * 60 * 1000)
      );
      const y = yesterday.getFullYear();
      const m = yesterday.getMonth() + 1;
      const d = yesterday.getDate();
      const e = y + "-" + this.add(m) + "-" + this.add(d) + " " + "23:59:59"; //结束

      dateTime.push(s);
      dateTime.push(e);

      this.recordSingle[0] = s;
      this.recordSingle[1] = e;
    },

    // 小票
    xiaopiao(val) {
      const params = {
        classNo: val.orderNo,
        stationId: val.stationId,
        classStartTime: val.classStartTime,
        classEndTime: val.classEndTime,
      };
      exportClassSe(params).then((res) => {
        if (res && res.code === 200) {
          uni.showToast({
            title: "补打成功",
            duration: 1000,
          });
        }
      });
    },

    goBack() {
      if (this.isGoDetail) {
        this.isGoDetail = false;
      } else {
        this.isGoConfig = false;
        this.tabId = 1;
      }
    },

    handleStation() {
      this.tabId = 0;
    },

    // 切换到班结记录tag
    handleRecord() {
      this.tabId = 1;
    },

    // 选择油站
    handleChangeSlect() {
      this.loadingStation = true;

      this.refresherEnabled = true;

      stationInitiateClassSe({
        stationId: this.selectValue,
      }).then((res) => {
        if (res && res.code === 200) {
          this.stationList = res.data.details;
          this.stationInfo = res.data.summary;
          this.cardSum = res.data.cardSum;
          // 油站班结开始时间
          this.startTime = res.data.startTime;
          // 油站班结结束时间
          this.createEndTime = res.data.createEndTime;
          this.disabled = false;
        } else {
          this.disabled = true;
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
      setTimeout(() => {
        this.loadingStation = false;
        this.refresherTriggered = false;
      }, 500);
    },
    configSubmit: Debounce(function () {
      if (!this.selectValue) {
        return;
      }
      uni.showLoading();
      configCreateClassSe({
        note: this.textNotes,
        classEndTime: this.createEndTime,
        stationId: this.selectValue,
      }).then((res) => {
        if (res && res.code === 200) {
          this.isGoConfig = true;
          this.selectValue = "";
          this.searchRecord();
          uni.hideLoading();
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000,
          });
        }
      });
    }),

    searchRecord() {
      console.log("搜索班结记录", this.recordValue, this.recordSingle);

      this.isShowNone = true;
      const params = {
        pageNum: 1,
        pageSize: 100,
        beginTime: this.recordSingle.length == 0 ? "" : this.recordSingle[0],
        endTime: this.recordSingle.length == 0 ? "" : this.recordSingle[1],
        stationId: this.recordValue,
      };
      // if (!this.recordSingle || !this.recordValue) {
      //     return;
      // }
      const a = this.range.find((item) => item.value === this.recordValue);
      this.loadingStation = true;
      getRecordList(params).then((res) => {
        if (res && res.code === 200) {
          this.recordList = res.rows;
        } else if (res) {
          this.recordList = [];
          uni.showToast({
            title: `${res.msg}`,
            icon: "error",
            duration: 2000,
          });
        }
      });
      setTimeout(() => {
        this.loadingStation = false;
      }, 500);
    },

    // 去详情页
    goDetailPage(val) {
      console.log(val, "ssss");
      this.loadingStation = true;
      getRecordDetail(val).then((res) => {
        if (res && res.code === 200) {
          this.queryGroupByOil = res.data.queryGroupByOil;
          this.detaiInfo = res.data;
        }
      });
      setTimeout(() => {
        this.loadingStation = false;
        this.isGoDetail = true;
      }, 500);
    },

    // 获取用户等级
    async getUserInfouSerLevel() {
      const level = await getUserInfo("userLevel");
      this.InfouSerLevel = level;
       // 这个用户等级仅仅用来控制油价调增的
       const userInfo = await getUserInfo("userInfo");
      this.userInfo = JSON.parse(userInfo);
    },
  },
};
</script>
<style lang="scss">
.disabled {
  background-color: #bfbfbf;
}
.qx-style {
  width: 70px;
  // background-color: #fb6703;
  transform: translateX(-35px);
  margin-top: 80px;
  margin-left: 50%;
}

.cont {
  .uni-select {
    width: 700rpx;
    height: 70rpx;
    margin-bottom: 20rpx;
  }

  .u-navbar {
    .u-icon {
      display: none;
    }
  }

  .none_record {
    width: 100%;
    text-align: center;
    margin-top: 400rpx;
    font-size: 42rpx;
  }

  .u-nav-slot {
    color: #000;
  }

  .config_bar {
    position: absolute;
    color: #000;
    font-size: 32rpx;
    left: 20rpx;
    top: 24rpx;
  }

  .cont_wraper {
    width: 100%;
    position: absolute;
    z-index: -1;
    height: 60rpx;
    background-color: #0020f5;
  }

  .conclu_tab_wraper {
    width: 100%;
    padding-top: 20rpx;
    background-color: #f5f5f5;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;

    .conclu_tab {
      height: 60rpx;
      line-height: 60rpx;
      width: 50%;
      text-align: center;
      background-color: #e7e7e7;
      color: #959595;
      font-size: 24rpx;

      &.a {
        &.active {
          background-color: #fff;
          color: #000;
        }
      }

      &.b {
        &.active {
          background-color: #fff;
          color: #000;
        }
      }
    }
  }

  .conclu_tab_main {
    .uni-load-more {
      margin-top: 300rpx;
    }

    .tab_main_station {
      padding: 30rpx 20rpx 0;

      .station_select {
        margin-bottom: 10rpx;
        position: sticky;
        display: flex;
        align-items: center;
        z-index: 5;

        .station_name {
          color: #333;
          font-size: 24rpx;
        }

        .uni-load-more {
          margin-top: 400rpx;
        }
      }

      .title_record_a {
        padding: 30rpx;
        background-color: #fb6802;
        border-radius: 20rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .title_record_b {
          width: 100%;
          justify-content: space-around;
          align-items: center;
          display: flex;

          &.title_record_b1 {
            width: 80%;
          }
        }

        .title_line {
          width: 1px;
          height: 100rpx;
          background-color: #eee;
        }

        .order_nav {
          display: flex;
          flex-direction: column;
          margin-bottom: 16rpx;

          &.center {
          }

          .name {
            color: #eee;
            font-size: 24rpx;
            margin-bottom: 10rpx;
          }

          .val {
            text-align: center;
            font-size: 46rpx;
            color: #fff;

            .text {
              font-size: 28rpx;
            }
          }
        }
      }

      .station_all_wraper {
        width: 100%;
        box-sizing: border-box;
        margin: 40rpx 0;

        .station_all_title {
          .val {
            font-size: 28rpx;
            color: #000;
            font-weight: 600;
          }
        }

        .station_all_line {
          width: 100%;
          height: 1px;
          background-color: #eee;
          margin: 10rpx 0;
        }

        .station_all_container_text {
          .name {
            font-size: 28rpx;
            font-weight: 700;
            margin-bottom: 10rpx;
          }

          textarea {
            height: 60rpx;
            width: 700rpx;
            box-sizing: border-box;
            border: 1px solid #f5f6f5;
            padding: 6rpx 20rpx;
          }
        }

        .station_all_container {
          display: flex;
          justify-content: space-between;
          color: #000;
          font-size: 26rpx;
          margin-bottom: 20rpx;
        }
      }
    }

    button {
      background-color: #fc6703;
      color: #fff;
      border-radius: 10rpx;
      border: none;

      &.disabled {
        background-color: #eee;
        color: #666;
      }
    }

    .tab_main_record {
      .main_record_wraper {
        padding: 20rpx;
        width: 100%;
        box-sizing: border-box;

        .record_station {
          align-items: center;
          display: flex;
          width: 100%;
          margin-bottom: 30rpx;

          .uni-date__x-input {
            font-size: 24rpx;
          }

          .name {
            font-size: 26rpx;
            margin-right: 20rpx;
          }

          .input {
            flex: 1;
          }
        }
      }
    }
  }

  .config_wraper {
    width: 100%;
    text-align: center;
    margin-top: 30rpx;

    .config_action {
      margin: 10rpx 0;
    }

    .config_container {
      font-size: 24rpx;
      color: #a1a1a1;
    }
  }

  .nav_bar_conclu .uni-navbar {
    .uni-navbar--border {
      border-bottom-style: none;
    }
  }

  .search_record_wraper {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f9;
    padding-top: 20rpx;

    .title_record {
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      background-color: #fff;
      margin-bottom: 20rpx;
    }

    .record_list {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      padding: 20rpx 20rpx 20rpx 20rpx;
      font-size: 26rpx;
      color: #000;
      margin-bottom: 20rpx;

      .val_amt {
        position: absolute;
        right: 20rpx;
        top: 8rpx;
        font-size: 28rpx;
        color: #fc650e;
        font-weight: 600;
      }

      .record_icon {
        position: absolute;
        right: 14rpx;
        top: 96rpx;
      }

      .record_card {
        margin: 24rpx 0;
      }

      .record_cont {
        display: flex;
        justify-content: space-between;

        .name {
          font-size: 26rpx;
          color: #000;
          font-weight: 700;
        }

        .val {
          font-size: 26rpx;
          color: #4ca4ff;
        }
      }
    }
  }

  .record_detail_container {
    font-size: 26rpx;
    color: #000;
    width: 100%;
    box-sizing: border-box;
    padding: 60rpx;

    .card {
      display: flex;
      justify-content: space-between;
      position: relative;
      margin-bottom: 20rpx;

      &.line {
        margin-bottom: 40rpx;

        &::after {
          content: "";
          position: absolute;
          width: 300rpx;
          height: 1px;
          background-color: #333;
          left: -16rpx;
          top: 50rpx;
        }
      }

      .val {
      }
    }

    .line_last {
      margin-bottom: 20rpx;
      width: 300rpx;
      height: 1px;
      background-color: #333;
    }
  }
}
</style>
